<template>
  <div class="header">  
    <el-button size="large" icon="Search" @click="navigateTo('/Note')">发现</el-button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <el-button size="large" icon="CreditCard" @click="navigateTo('/my-note')">笔记管理</el-button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  
      <el-button size="large"  icon="Position" @click="navigateTo('/note-upload')">发布笔记</el-button>  
  </div> 
  <div class="container">
    <div class="form-wrapper">
      <h4>发布笔记</h4>
      <el-form :label-position="top" label-width="80px" :model="form">
        <el-form-item label="标题:">
          <el-input type="text" placeholder="可以填写标题噢~" v-model="form.title" maxlength="30" show-word-limit style="width: 100%;" clearable></el-input>
        </el-form-item>
        <el-form-item label="笔记内容:">
          <el-input type="textarea" placeholder="请输入正文描述" v-model="form.note_content" maxlength="500" show-word-limit style="width: 100%;" clearable></el-input>
        </el-form-item>
        <el-form-item label="笔记类型:">
          <el-select v-model="form.note_type" placeholder="请选择笔记类型" style="width: 100%;"clearable >
            <el-option label="传统音乐" value="传统音乐"></el-option>
            <el-option label="新国风流行" value="新国风流行"></el-option>
            <el-option label="戏曲融合" value="戏曲融合"></el-option>
            <el-option label="主题文化" value="主题文化"></el-option>
            <el-option label="地域特色" value="地域特色"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="封面图片:">
          <div class="box">
            <el-upload class="upload-demo" drag action="http://localhost:8080/v1/NoteCreate/upload" multiple :on-success="handleSuccess" :before-upload="beforeUpload">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip" slot="tip">只能上传jpg/png文件,且不超过500kb</div>
            </el-upload>
            <!-- <img v-if="form.image" :src="'http://localhost:8080/images/upload/' + form.image" style="width: 200px; height: auto; margin-top: 10px;" /> -->
          </div>
        </el-form-item>
        <div class="button">
          <el-button type="primary" plain @click="submitForm">提交</el-button>&nbsp;&nbsp;&nbsp;
          <el-button type="primary" plain  @click="navigateTo('/my-note')">返回</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus';
import axios from 'axios';
import { Plus } from '@element-plus/icons-vue';

export default { 
  data() {
    return {
      form: {
        title: '',
        note_content: '',
        note_type: '',
        image: '',
        imageUrl:" "   , //图片URL地址
        userId: ''
      }
    }
  }, 
  methods: {
    navigateTo(route) {  
      this.$router.push(route); // 使用路由跳转  
    },  
    handleSuccess(response){     
      console.log(response);
    this.form.image=response
  },
  beforeUpload(file) {
      const isJPGorPNG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt500K = file.size / 1024 < 500;
      if (!isJPGorPNG) {
        this.$message.error('上传封面图片只能是 JPG/PNG 格式!');
      }
      if (!isLt500K) {
        this.$message.error('上传封面图片大小不能超过 500KB!');
      }
      return isJPGorPNG && isLt500K;
    },
    submitForm(){
      this.userId = sessionStorage.getItem('user_id') || localStorage.getItem('user_id');
      this.form.like_count = 0;  //设置收藏量为0
      this.form.view_count = 0;
      this.form.comment_count = 0;
      this.form.user_id = this.userId; // 设置当前登录用户的ID
      this.form.note_status = '待审核'; // 设置笔记状态为待审核
      axios.post(`/v1/NoteCreate`, this.form)
        .then(response => {
          console.log('笔记创建成功:', response);
          ElMessage({
            type: 'success',
            message: '提交成功待审核！'
          });
        })
        .catch(error => {
          console.error('创建笔记失败:', error);
          ElMessage({
            type: 'error',
            message: '提交失败，请重试！'
          });
        });
    }
  },
}
</script>

<style scoped>
.header {
  text-align: center;
  margin-bottom: 30px;
  margin-top: 30px;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 50vh;
}

.form-wrapper {
  background-color: #f9fafc;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 600px;
  text-align: left;
}

.form-wrapper h4 {
  text-align: center;
  margin-bottom: 20px;
}

.button {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

@media (max-width: 768px) {
  .container {
    padding: 0 15px;
  }

  .form-wrapper {
    padding: 15px;
  }
}
</style>